<template>
    <div>
        <el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="headCellStyle">
            <el-table-column prop="date" min-width="45%" align="center">
                <template slot-scope="scope">
                    <span class="legeng-item" :style="{ backgroundColor: color[scope.$index] }"></span>
                </template>
            </el-table-column>
            <el-table-column prop="maxValue" label="最大" min-width="48%"></el-table-column>
            <el-table-column prop="minValue" label="最小" min-width="48%"></el-table-column>
            <el-table-column prop="avgValue" label="平均" min-width="48%"></el-table-column>
            <el-table-column prop="thresholdRoof" label="上限" min-width="48%">
                <template slot-scope="scope">
                    <span>{{ upperLimit ? scope.row.thresholdRoof : '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="thresholdFloor" label="下限" min-width="48%">
                <template slot-scope="scope">
                    <span>{{ lowerLimit ? scope.row.thresholdFloor : '-' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="currentValue" label="当前" min-width="48%"></el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        props: {
            tableData: {
                type: Array,
            },
            color: {
                type: Array,
            },
            upperLimit: {
                type: Boolean,
                default: false,
            },
            lowerLimit: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {}
        },
        methods: {
            cellStyle(row) {
                if (row.columnIndex == 4 || row.columnIndex == 5) {
                    return {color: '#ff7f38'}
                } else if (row.columnIndex == 6) {
                    return {color: '#73d8fa'}
                }
            },
            headCellStyle(row) {
                if (row.columnIndex == 4 || row.columnIndex == 5) {
                    return {color: '#ff7f38'}
                } else if (row.columnIndex == 6) {
                    return {color: '#73d8fa'}
                }
            },
        },
    }
</script>

<style lang="stylus" scoped>
    .legeng-item
        display inline-block
        width 0.18rem
        height 0.18rem
        background-color #ae5da1

    .limitColor
        color red !important

    >>>
        .el-table .el-table__header th
            background-color #fff

        .el-table, .el-table tr, .el-table th
            background #fff
            color #000

        .el-table, .el-table tr td
            text-align center
        .el-table tbody tr:hover > td
            background-color transparent !important
        .el-pagination
            argin-top 0.1rem
        el-pagination .el-pagination__total, .el-pagination .el-pagination__jump
            color #fff
</style>
